<script setup>
import { ElTabPane, ElTabs } from 'element-plus'
import Search from '~/components/home/Search.vue'
import { NewsType, NewsTypeEN } from '~/constants'
import { getCase } from '~/service/case'
import { getNews } from '~/service/news'
import { getProducts } from '~/service/products'

clearNuxtData()
useHeader('light')
const { locale, isCN } = useLocale()
const activeTab = ref('product')
const products = ref([])
const cases = ref([])
const newsList = ref([])
const loading = ref(false)

const { resolveImgURL } = useGlobalStore()
const router = useRouter()
const { query } = useRoute()

onMounted(() => {
  if (query?.q)
    onSearch(query.q)
})

async function onSearch(k) {
  let results = []
  loading.value = true
  try {
    results = await Promise.all([
      getProducts({ search_text: k, size: 1000 }),
      getCase({ search_text: k, size: 1000 }),
      getNews({ search_text: k, size: 1000 }),
    ])
  }
  catch (error) {
    console.error('search error,', error)
  }
  finally {
    loading.value = false
  }
  const [productRes, caseRes, newsRes] = results
  products.value = productRes?.list || []
  cases.value = caseRes?.list || []
  newsList.value = newsRes?.list || []
}
</script>

<template>
  <div>
    <div h="[var(--header-height)]" bg="#fff" />
    <Breadcrumbs :items="[{ name: $t('search.result') }]" />
    <main p="x-[170px] b-[145px] max-md:x-[var(--padding-x-wrap-md)]" class="max-md:mt-[24px]">
      <div class="animate-fade-in-up">
        <Search change-route @search="onSearch" />
      </div>

      <div m="t-[40px] max-md:t-[32px]">
        <ElTabs v-model="activeTab" v-loading="loading">
          <ElTabPane name="product">
            <template #label>
              <div class="custom-tab">
                <span>{{ $t('menu.products') }}</span>
                <div v-show="products.length > 0" class="tag">
                  {{ products.length }}
                </div>
              </div>
            </template>
            <ul p="t-[48px] max-md:t-[12px]" grid="~ cols-2 max-md:cols-1 gap-x-[48px] max-md:gap-x-3 gap-y-[40px]">
              <li v-for="product in products" :key="product.id" data-aos="fade-up" class="mt-[32px] flex-1 max-md:m-0 odd:mr-[58px] max-md:odd:mr-0">
                <Product size="mini" v-bind="product" @click="router.push(`/product/${product.id}`)" />
              </li>
            </ul>
          </ElTabPane>
          <ElTabPane name="case">
            <template #label>
              <div class="custom-tab">
                <span>{{ $t('menu.cases') }}</span>
                <div v-show="cases.length > 0" class="tag">
                  {{ cases.length }}
                </div>
              </div>
            </template>
            <ul p="t-[48px] max-md:t-[12px]" grid="~ cols-3 max-md:cols-2 gap-x-[48px] max-md:gap-x-3 gap-y-[40px]">
              <li v-for="item in cases" :key="item.id" data-aos="fade-up" class="flex flex-col items-center">
                <div class="h-[360px] w-[500px] max-md:h-[160px] max-md:w-full" @click="router.push(`/examples/case?id=${item.id}`)">
                  <img class="h-full w-full object-cover" :src="resolveImgURL(item.cover_url)" alt="">
                </div>
                <h5 m="t-[24px] b-[16px]" text="[24px] max-md:[16px]" leading="[32px] max-md:[20px]">
                  {{ get(item, 'title', locale) }}
                </h5>
                <p text="[18px] max-md:[13px]" leading="[32px] max-md:[18px]" class="opacity-60">
                  {{ get(item, 'address', locale) }}
                </p>
              </li>
            </ul>
          </ElTabPane>
          <ElTabPane name="news">
            <template #label>
              <div class="custom-tab">
                <span>{{ $t('menu.news') }}</span>
                <div v-show="newsList.length > 0" class="tag">
                  {{ newsList.length }}
                </div>
              </div>
            </template>
            <ul p="t-[48px] max-md:t-[12px]" grid="~ cols-2 max-md:cols-1 gap-x-[48px] gap-y-[32px] max-md:gap-y-[12px]">
              <li v-for="news in newsList" :key="news.id" data-aos="fade-up" flex="~ 1" justify="between" border="b-[1px] solid [#f1f1f1]" p="b-[24px]" text="[16px]">
                <div m="b-[4px] max-md:b-0">
                  <h5 text="[18px] max-md:[16px]" leading="[32px] max-md:[24px]">
                    <NuxtLink :to="`/news/news?id=${news.id}`">
                      {{ get(news, 'title', locale) }}
                    </NuxtLink>
                  </h5>
                  <div text="[#1f1f1f66] max-md:[13px]">
                    {{ isCN ? NewsType[news.type] : NewsTypeEN[news.type] }}
                  </div>
                </div>
                <div class="flex-shrink-0 max-md:ml-[12px]" text="[14px] max-md:[12px] [#A1A1A1]">
                  {{ news.publish_date }}
                </div>
              </li>
            </ul>
          </ElTabPane>
        </ElTabs>
      </div>
    </main>
  </div>
</template>

<style scoped lang="postcss">
.custom-tab {
  @apply flex text-[18px] text-[#141414] max-md:text-[16px];

  .tag {
    @apply ml-[10px] rounded-[100px] bg-[#0083ff19] p-[8px] py-[2px] text-[16px] text-[var(--primary-color)];
  }
}
</style>
